<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>overage</title>

<script type="text/javascript">

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.define('Subject', { 
        extend: 'Ext.data.Model', 
        fields: ['displayName','lesson','price']
    })
    Ext.Ajax.request({
	    url: '../service/student_overage',
	    params: {
	        studentid: Ext.getDom("studentid").value
	    },
	    success: function(response, opts) {
	        obj = Ext.decode(response.responseText);
	        console.log(obj)
	        Ext.create('Ext.form.Panel',{
	        	renderTo: 'overage',
	        	width: '100%',
	        	items:[{
	        		xtype: 'label',
	        		text: '总余额：'+obj.sumoverage,
	        		margin: 10,
	        	},{
	        		xtype: 'label',
	        		text: '剩余总课时：'+obj.sumlesson,
	        		margin: 10,
	        	},{
	        		xtype: 'tabpanel',
	        		activeTab: 0,
	        		margin: '10 0 0 0',
	        	    items: [{
	        	        	title: '第一学期',
	        	       		items:[{
	        					xtype: 'label',
	        					text: '总课时：'+obj.terms[0].lesson,
	        					margin: 10,
	        				},{
	        					xtype: 'label',
	        					text: '总金额：'+obj.terms[0].sum,
	        					margin: 10,
	        				},{
	        					xtype:'gridpanel',
	        					columns:[{
									text: '课程名称',  dataIndex: 'displayName',width:'30%',
								},{
									text: '所上课时',  dataIndex: 'lesson',width:'30%',
								},{
									text: '金额',  dataIndex: 'price',width:'30%',
								}],
								store: Ext.create('Ext.data.Store', {
									autoLoad: true,
									model: "Subject",
									data: obj.terms[0].subjects
								})
	        				}]
	        	    },{
	        	        title: '第二学期',
	        	        items:[{
	        					xtype: 'label',
	        					text: '总课时：'+obj.terms[1].lesson,
	        					margin: 10,
	        				},{
	        					xtype: 'label',
	        					text: '总金额：'+obj.terms[1].sum,
	        					margin: 10,
	        				},{
	        					xtype:'gridpanel',
	        					columns:[{
									text: '课程名称',  dataIndex: 'displayName',width:'30%',
								},{
									text: '所上课时',  dataIndex: 'lesson',width:'30%',
								},{
									text: '金额',  dataIndex: 'price',width:'30%',
								}],
								store: Ext.create('Ext.data.Store', {
									autoLoad: true,
									model: "Subject",
									data: obj.terms[1].subjects
								})
								
	        				}]
	        	    },{
	        	        title: '第三学期',
	        	        items:[{
	        					xtype: 'label',
	        					text: '总课时：'+obj.terms[2].lesson,
	        					margin: 10,
	        				},{
	        					xtype: 'label',
	        					text: '总金额：'+obj.terms[2].sum,
	        					margin: 10,
	        				},{
	        					xtype:'gridpanel',
	        					columns:[{
									text: '课程名称',  dataIndex: 'displayName',width:'30%',
								},{
									text: '所上课时',  dataIndex: 'lesson',width:'30%',
								},{
									text: '金额',  dataIndex: 'price',width:'30%',
								}],
								store: Ext.create('Ext.data.Store', {
									autoLoad: true,
									model: "Subject",
									data: obj.terms[2].subjects
								})
								
	        				}]
	        	    },{
	        	        title: '第四学期',
	        	        items:[{
	        					xtype: 'label',
	        					text: '总课时：'+obj.terms[3].lesson,
	        					margin: 10,
	        				},{
	        					xtype: 'label',
	        					text: '总金额：'+obj.terms[3].sum,
	        					margin: 10,
	        				},{
	        					xtype:'gridpanel',
	        					columns:[{
									text: '课程名称',  dataIndex: 'displayName',width:'30%',
								},{
									text: '所上课时',  dataIndex: 'lesson',width:'30%',
								},{
									text: '金额',  dataIndex: 'price',width:'30%',
								}],
								store: Ext.create('Ext.data.Store', {
									autoLoad: true,
									model: "Subject",
									data: obj.terms[3].subjects
								})
								
	        				}]
	        	    }]
	        		
	        	}]
	        });
	    },
	});
	
});
</script>
</head>
<body>
	<input type="hidden" id="studentid" value="<s:property value='studentid'/>"/>
	<div id="overage"></div>
</body>
</html>